import { ChangeDetectionStrategy, Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MenuSection, menuSections } from '@shared/models/menu.models';
import { MenuLinkComponent } from './menu-link.component';
import { MenuToggleComponent } from './menu-toggle.component';

@Component({
  selector: 'cne-side-menu',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatIconModule,
    MatButtonModule,
    MenuLinkComponent,
    MenuToggleComponent
  ],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SideMenuComponent {
  // 使用 signals 管理菜单状态
  private menuSectionsSignal = signal<MenuSection[]>(menuSections);
  
  // 计算属性
  menuSections = computed(() => this.menuSectionsSignal());

  // TrackBy 函数
  trackByMenuSection(index: number, section: MenuSection): string {
    return section.id;
  }
}
